<template>
	<view class="myhome-bg" v-show="showMyHome" @tap="$parent.closeHome()">
		<view class="myhome-container" @tap.stop="">
			<view class="myhome-card">
				<view class="myhome-card-top">
					<view class="myhome-card-top-box" @tap="tapItem" data-index="1">
						<view class="myhome-card-top-box-label">家庭成员：</view>
						<view class="myhome-card-top-box-num">
							<text class="myhome-card-top-box-num-content">{{familyMemberNum}}</text>
							<text class="myhome-card-top-box-num-unit">人</text>
						</view>
					</view>
					<view class="myhome-card-top-box" @tap="tapItem" data-index="2">
						<view class="myhome-card-top-box-label">守护成员：</view>
						<view class="myhome-card-top-box-num">
							<text class="myhome-card-top-box-num-content">{{childrenMemberNum}}</text>
							<text class="myhome-card-top-box-num-unit">人</text>
						</view>
					</view>
				</view>
				<view class="myhome-card-book" @tap="tapItem" data-index="3">
					<view class="book-left">家长通讯录</view>
					<view class="book-right">+</view>
				</view>
				<view class="myhome-card-book" @tap="tapItem" data-index="4">
					<view class="book-left">校园通讯录</view>
					<view class="book-right">+</view>
				</view>
			</view>
		</view>
		<view class="invite" @tap.stop="">
			<view class="invite-container">
				<view class="invite-qrcode" @tap="saveInviteImg">
					<image class="qrcode-img" :src="inviteImgUrl"></image>
				</view>
				<view class="invite-label1">点击保存二维码</view>
				<view class="invite-label2">可邀请家人进入</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showToastMsg
	} from '../utils'

	export default {
		props: ['showMyHome', 'familyMemberNum', 'childrenMemberNum', 'inviteImgUrl'],

		data() {
			return {

			}
		},

		methods: {

			tapItem(e) {
				let index = e.currentTarget.dataset.index
				switch (index) {
					case '1':
						uni.navigateTo({
							url: '/pages/parent_member/parent_member'
						})
						break
					case '2':
						uni.navigateTo({
							url: '/pages/protect_member/protect_member'
						})
						break
					case '3':
						uni.navigateTo({
							url: '/pages/parent_book/parent_book'
						})
						break
					case '4':
						uni.navigateTo({
							url: '/pages/school_book/school_book'
						})
						break
					default:
						break
				}
			},

			saveImg() {

				uni.downloadFile({
					url: 'https://public-1300796766.cos.ap-guangzhou.myqcloud.com/mini/3.png',
					success: function(res) {

						if (res.statusCode != 200) {
							uni.showModal({
								title: '提示',
								content: '服务器错误，请求失败'
							})
							return
						}

						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								showToastMsg('图片保存成功')
							},
							fail: function() {
								showToastMsg('图片保存失败')
							}
						});

					},
					fail: function() {
						uni.showModal({
							title: '提示',
							content: '网络错误，请稍后重试'
						})
					}
				})

			},

			saveInviteImg() {

				let that = this

				uni.getSetting({
					success: function(getRes) {
						if (getRes.authSetting['scope.writePhotosAlbum']) {
							that.saveImg()
						} else {
							uni.openSetting({
								success: function(openRes) {
									if (openRes.authSetting['scope.writePhotosAlbum']) {
										that.saveImg()
									} else {
										showToastMsg('图片保存失败，您拒绝授权')
									}
								},
								fail: function() {
									showToastMsg('授权失败，请重试')
								}
							})
						}
					}
				})

			}

		}
	}
</script>

<style>
	.myhome-bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.myhome-container {
		height: 800rpx;
		width: 78%;
		background-color: #fec901;
		border-radius: 28rpx;
		padding: 32rpx;
		z-index: 101;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.myhome-card {
		width: 98%;
		height: 76%;
		background-color: #ffffff;
		border-radius: 28rpx;
		box-shadow: 4rpx 4rpx 12rpx 0 rgba(106, 11, 14, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.myhome-card-top {
		width: 84%;
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
	}

	.myhome-card-top-box {
		display: flex;
		flex-direction: column;
		box-shadow: 2rpx 6rpx 18rpx 0px rgba(202, 202, 202, 0.71);
		border-radius: 10rpx;
		width: 228rpx;
		height: 200rpx;
		align-items: center;
	}

	.myhome-card-top-box-label {
		font-size: 36rpx;
		margin-top: 24rpx;
	}

	.myhome-card-top-box-num {
		margin-top: 26rpx;
	}

	.myhome-card-top-box-num-content {
		font-size: 50rpx;
	}

	.myhome-card-top-box-num-unit {
		font-size: 28rpx;
	}

	.myhome-card-book {
		width: 70%;
		display: flex;
		justify-content: space-between;
		height: 66rpx;
		align-items: center;
		box-shadow: 2rpx 6rpx 18rpx 0px rgba(202, 202, 202, 0.71);
		border-radius: 6rpx;
		margin-top: 30rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.book-left {
		font-size: 30rpx;
	}

	.book-right {
		font-size: 32rpx;
	}

	.invite {
		width: 38%;
		background-color: #ffffff;
		border-radius: 28rpx;
		position: fixed;
		z-index: 120;
		top: 58%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30rpx;
	}

	.invite-qrcode {
		display: flex;
		justify-content: center;
	}

	.qrcode-img {
		width: 170rpx;
		height: 170rpx;
	}

	.invite-label1 {
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.invite-label2 {
		font-size: 28rpx;
		margin-top: 10rpx;
	}
</style>
